<template>
	<view class="modular">
		<view class="headerBox">
			<view class="header">
				<view class="information">
					<view>
						<view><text>会员</text>：{{information.userName || ''}} </view>
						<view></view>
					</view>
					<view>
						<view><text>性别</text>：{{userInfo.sex && userInfo.sex == 1 ? '男' : '女' || ''}} </view>
						<view><text>年龄</text>：{{userInfo && userInfo.age}}</view>
					</view>
					<view>
						<view><text>评估人</text>：{{information.userHealthName || ''}}</view>
						<view><text>评估日期</text>：{{information.assessmentDate || ''}}</view>
					</view>
				</view>
			</view>
			
			<view class="connectBox">
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
				<image src="@/static/img/healthStatus/connect@2x.png"></image>
			</view>
		</view>
		<view class="mainContent">
			<view  v-for="(item,index) in details">
				<view class="summary" v-if="item.assessmentSn">
					<image src="@/static/img/futureDiseases/hypertensionHas@2x.png" class="topLeft" v-if="item.type == 8" style="width: 378upx;"></image>
					<image src="@/static/img/futureDiseases/diabetesHas@2x.png" class="topLeft" v-if="item.type == 9" style="width: 378upx;"></image>
					<image src="@/static/img/futureDiseases/obesityHas@2x.png" class="topLeft" v-if="item.type == 10"></image>
					<image src="@/static/img/futureDiseases/metsHas@2x.png" class="topLeft" v-if="item.type == 11" style="width: 448upx;"></image>
					<image src="@/static/img/futureDiseases/cardiovascularHas@2x.png" class="topLeft" v-if="item.type == 12"></image>
					<view class="top">
						<image src="@/static/img/monitor/healthStatus/number@2x.png"></image>
						<view>{{item.assessmentSn}}</view>
						<view>{{item.assessmentDate}}</view>
					</view>
					<view class="bottom">
						<view>{{information.userName || ''}}</view>
						<view @click="particulars(item)">详情</view>
					</view>
				</view>			
				
				<view class="noData" v-if="!item.assessmentSn">
					<image src="@/static/img/futureDiseases/hypertensionHas@2x.png" class="topLeft" v-if="item.type == 8" style="width: 378upx;"></image>
					<image src="@/static/img/futureDiseases/diabetesHas@2x.png" class="topLeft" v-if="item.type == 9" style="width: 378upx;"></image>
					<image src="@/static/img/futureDiseases/obesityHas@2x.png" class="topLeft" v-if="item.type == 10"></image>
					<image src="@/static/img/futureDiseases/metsHas@2x.png" class="topLeft" v-if="item.type == 11" style="width: 448upx;"></image>
					<image src="@/static/img/futureDiseases/cardiovascularHas@2x.png" class="topLeft" v-if="item.type == 12"></image>
					无数据
				</view>
			</view>			
			
		</view>
	</view>
</template>

<script>
	import {age} from '@/static/js/filter.js'
	export default{
		data() {
			return {
				psychologyQuestion:[],
				data:{},
				answer: [],
				userInfo: {},
				information:{},
				details:{}
			}
		},
		onLoad(option) {
			if(option.id) {
				this.$api.getUserInfo().then((res) => {
					if(res.data.returnCode == 200) {
						this.userInfo = res.data && res.data.result
					}
				})
				this.$api.appHealthAssessSummaryDetail(option.id).then((res) => {
					if(res.data.returnCode == 200) {
						this.information = res.data.result.appAssessSummaryEntity;
						this.details = res.data.result.appAssessSummaryDetailEntityList
					}
					
				})
			}
		},
		methods:{
			age,
			 particulars(item) {
				if(item.type == 8) {
					uni.navigateTo({
						url:'/pages/futureDiseases/hypertension/toView?id='+item.servId
					})
				}else if(item.type == 9) {
					uni.navigateTo({
						url:'/pages/futureDiseases/diabetes/toView?id='+item.servId
					})
				}else if(item.type == 10) {
					uni.navigateTo({
						url:'/pages/futureDiseases/obesity/toView?id='+item.servId
					})
				}else if(item.type == 11) {
					uni.navigateTo({
						url:'/pages/futureDiseases/mets/toView?id='+item.servId
					})
				}else {
					uni.navigateTo({
						url:'/pages/futureDiseases/cardiovascular/toView?id='+item.servId
					})	
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/css/healthStatus/toView.scss';
	.summary {
		width: 702upx;
		background: #FFFFFF;
		border-radius: 12upx;
		position: relative;
		padding: 0 28upx 0 42upx;
		box-sizing: border-box;
		margin-bottom: 24upx;
		.topLeft {
			position: absolute;
			left: 0;
			width: 348upx;
			height: 56upx;
			margin-bottom: 32upx;
		}
		.top {
			padding-top: 86upx;
			display: flex;
			position: relative;		
			border-bottom: 1upx solid #cccccc;
			padding-bottom: 24upx;
			image {
				position: absolute;
				left: -48upx;
				top: 61%;
				width: 32upx;
				height: 30upx;
			}
			view {
				flex: 1;
			}
			view:last-child{
				text-align: right;
			}
		}
		.bottom {
			display: flex;
			padding: 25upx 0 35upx;
			view:nth-child(1) {
				flex: 1;
				color: #333333;
				font-size: 40upx;
				font-weight: bold;
			}
			view:last-child {
				width: 146upx;
				height: 50upx;
				background: #6AB7FF;
				border-radius: 25upx;
				color: #FFFFFF;
				font-size: 30upx;
				line-height: 50upx;
				text-align: center;
			}
		}
	}
	.noData {
		height: 96upx;
		background: #FFFFFF;
		border-radius: 12upx;
		position: relative;
		color: #677092;
		font-size: 32upx;
		text-align: right;
		box-sizing: border-box;
		line-height: 96upx;
		margin-bottom: 24upx;
		padding-right: 34upx;
		.topLeft {
			position: absolute;
			left: 0;
			top: 0;
			width: 278upx;
			height: 56upx;
			margin-bottom: 32upx;
		}
	}
</style>
